.page-store-category {
  .at-tabs {
    height: auto;
  }
  .at-tabs__header {
    justify-content: start;
    height: 92px;
    .at-tabs__item {
      flex: none;
      color: #999;
      font-size: 28px;
      line-height: 48px;
      transition: all 0.15s;
      padding: 24px 30px;
      &--active {
        font-size: 32px;
        color: #222;
      }
      .at-tabs__item-underline {
        background: none;
      }
    }
  }
  .at-tabs__body {
    display: none;
  }
  .category-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 140px;
    top: 0;
    display: flex;
  }
  .comp-series__nav {
    width: 196px;
    height: 100%;
    background-color: #f5f5f5;
  }
  .nav-list {
    .nav-item {
      @include text-overflow();
      height: 89px;
      font-size: 28px;
      line-height: 89px;
      text-align: center;
      padding: 0 10px;
      position: relative;
      &.active {
        background: #fff;
        &::before {
          content: '';
          width: 4px;
          height: 50%;
          background-color: var(--color-primary);
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
  .comp-series__content {
    width: 554px;
    height: 100%;
    background-color: #fff;
    // background-color: rgb(66, 209, 109);
    .category-content-list {
      // display: flex;
      flex-wrap: wrap;
      padding: 20rpx;
    }
    .content-item {
      width: 158px;
      margin-bottom: 20px;
      text-align: center;
      &:nth-child(3n + 1),
      &:nth-child(3n + 2) {
        margin-right: 20px;
      }
      .item-name {
        margin-top: 10px;
      }
    }
  }
  .category-two-item {
    // margin: 0 10px 20px 0;
    // text-align: center;
    margin-bottom: 20px;

    .item-name {
      color: #333;
      font-weight: 600;
    }
  }

  .category-three {
    display: flex;
    flex-wrap: wrap;
  }
  .category-three-item {
    width: 156px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    margin-right: 20px;
    &:nth-child(3n + 3) {
      margin-right: 0;
    }
    .item-name {
      margin-top: 10px;
    }
  }
}
